[민서] #2

rachel5640 · 2023-11-07T15:03:38Z

🌮 무엇을:

input 숫자 입력
사칙연산 기호 선택
결과 버튼
완료된 계산값 제공

🌮 어떻게:

input1, input2, sign, result, resultBtn 에 요소가 존재한다는 걸 알리기 위해서 null 검사와 타입 단언을 사용
input1?.value input2?.value 을 사용하여, 만약 input1 또는 input2가 null이라면 0을 기본값으로 사용하게 되며, 코드 실행 중 null 오류가 발생하지 않게

if (input1 && input2 && sign && result && resultBtn) {
  function displayResult() {
    const num1 = parseFloat(input1?.value || "0");
    const num2 = parseFloat(input2?.value || "0");
    const selectedOperator = sign.value as Operator;
    const resultValue = calculate(num1, num2, selectedOperator);
    result.textContent = resultValue.toString();
  }

  resultBtn.addEventListener("click", displayResult);
} else {
  console.error("돌아가! 계산안돼");
}

🌮 얼마나:

얼마나 걸렸나요? 4시간
어떤 부분이 어려웠나요?
: 타입스크립트가 처음이었는데,정말 오류가 많이나더라구요...
변수가 null일 가능성을 모두 빼느라고 시간을 조금 썼어요🥹

: 커밋을 완전히 깜빡하고 안남겼어요...다음에는 더 잘게 쪼개보겠습니다..

🌮 구현 사항:

2023-11-08.12.49.21.mov

hae2ni

굿굿 수고했어! 타스 첨이랑 많이 어려웠을텐데 왕왕 고생많이해떠!

hae2ni · 2023-11-15T03:45:48Z

src/main.ts

+      if (num2 !== 0) {
+        return num1 / num2;
+      } else {
+        return NaN;


NaN보단 확실히 '계산이 안된다"를 나타내는 표지 반영이 좋을 것 같아옹

hae2ni · 2023-11-15T03:45:59Z

src/main.ts

+) as HTMLButtonElement | null;
+
+function calculate(num1: number, num2: number, operator: Operator): number {
+  switch (operator) {


왁 타스 넘넘 잘쓴다 👍

hae2ni · 2023-11-15T03:47:46Z

src/main.ts

+  }
+}
+
+if (input1 && input2 && sign && result && resultBtn) {


다 있을 때 처리해준 거 넘 좋아요! resultBtn같은 거는 이미 있는 거니까 없을 수도 있고 있을 수도 있는 값들만 체크해주는 건 어떨까 싶은데!!

hae2ni · 2023-11-15T04:08:43Z

src/main.ts

+
+if (input1 && input2 && sign && result && resultBtn) {
+  function displayResult() {
+    const num1 = parseFloat(input1?.value || "0");


혹시 여기에 0을 넣어줄 이유가 있었ㄴㅏ요?
그리구, 옵셔널 체이닝 참고하면 좋아!

se0jinYoon

나도 타스가 처음인지라 .... 민서 코드리뷰 하면서 저 헷갈렸던 부분들 정리할 수 있었어용 🧚🏻‍♀️
수고 많았어요오 💗💗

se0jinYoon · 2023-11-15T03:57:21Z

src/main.ts

@@ -0,0 +1,40 @@
+type Operator = "sum" | "sub" | "mul" | "divide";


이번 주차 아티클 작성하고 와서 보니깐 눈에 보이는 코드 💡
유니언을 배우기 전에 사용했다니 멋져 ....

se0jinYoon · 2023-11-15T04:05:53Z

src/main.ts

+    const num1 = parseFloat(input1?.value || "0");
+    const num2 = parseFloat(input2?.value || "0");


저도 이번에 하면서 알게 된 건데 ! 민서 코드에서도 보여서 생각난 김에 코드리뷰하면서 정리 한 번 하고 갈게요 히히

?. : optional chaining

input1 이 null 또는 undefined 이어도 오류가 발생하지 않고 undefined를 반환한다

|| : nullish coalescing

input1의 value가 falsy인 경우 0을 기본값으로 제공한다

se0jinYoon · 2023-11-15T04:07:44Z

src/main.ts

+      } else {
+        return NaN;


여기 NaN보다는 에러 문구같은 걸 리턴하면 어떨까요?
예를들면 0으로 나눌 수 없습니다! 같은 것!

se0jinYoon · 2023-11-15T04:11:04Z

src/main.ts

+const input1 = document.getElementById("input1") as HTMLInputElement | null;
+const input2 = document.getElementById("input2") as HTMLInputElement | null;
+const sign = document.getElementById("sign") as HTMLSelectElement;
+const result = document.getElementById("result") as HTMLHeadingElement;
+const resultBtn = document.getElementById(
+  "resultBtn"
+) as HTMLButtonElement | null;


난 null 에러가 계속 나서 냅다 null일 수 없다! 라고 !연산자 통해서 제한하고 시작했는데 이렇게 핸들링할 수 있는 거였구나 ,,,,

완성

1dc7523

rachel5640 added the 계산기프로젝트 label Nov 7, 2023

rachel5640 changed the title ~~[민서]계산기 프로젝트(작성중)~~ [민서] Nov 7, 2023

rachel5640 requested a review from se0jinYoon November 7, 2023 15:06

rachel5640 self-assigned this Nov 7, 2023

hoeun0723 linked an issue Nov 7, 2023 that may be closed by this pull request

계산기 프로젝트 구현 내용 #4

Open

rachel5640 requested review from hoeun0723, binllionaire, moondda, SooY2 and hae2ni November 8, 2023 08:57

hae2ni reviewed Nov 15, 2023

View reviewed changes

se0jinYoon reviewed Nov 15, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[민서] #2

[민서] #2

rachel5640 commented Nov 7, 2023 •

edited

Loading

hae2ni left a comment

hae2ni Nov 15, 2023

hae2ni Nov 15, 2023

hae2ni Nov 15, 2023

hae2ni Nov 15, 2023

se0jinYoon left a comment

se0jinYoon Nov 15, 2023

se0jinYoon Nov 15, 2023

se0jinYoon Nov 15, 2023

se0jinYoon Nov 15, 2023

		@@ -0,0 +1,40 @@
		type Operator = "sum" \| "sub" \| "mul" \| "divide";

		const num1 = parseFloat(input1?.value \|\| "0");
		const num2 = parseFloat(input2?.value \|\| "0");

[민서] #2

Are you sure you want to change the base?

[민서] #2

Conversation

rachel5640 commented Nov 7, 2023 • edited Loading

🌮 무엇을:

🌮 어떻게:

🌮 얼마나:

🌮 구현 사항:

hae2ni left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

se0jinYoon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

?. : optional chaining

|| : nullish coalescing

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rachel5640 commented Nov 7, 2023 •

edited

Loading

`?.` : optional chaining

`||` : nullish coalescing